<template>
	<x-border type="light" ref="xBorder" :border="border">
		<div v-loading="vLoading">
			<x-auto-preview :viewModel="viewModel"></x-auto-preview>
		</div>
	</x-border>
</template>
<script>
	import ala from 'ala'
	export default {
		props: {
			widgetData: {},
			border: {}
		},
		data() {
			return {
				async: false,
				viewModel: null,
				vLoading: true
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.vLoading = true
				var para = {
					type: this.widgetData.value.type,
					...this.$ala.urlToObject()
				}
				var response = await this.$ala.httpGet('api/Auto/Preview', para)
				if (response) {
					this.viewModel = response
					this.$nextTick(() => {
						var border = this.$ala.getBorder(this.viewModel.border)
						this.$nextTick(() => {
							this.$refs.xBorder.init(border)
						})
					})
					this.async = true
				}

				this.firstLoad = false
				this.vLoading = false
			}
		}
	}
</script>